<template>
<div class="dashboard-container">
    <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools
            :tree-data="company"
            set="操作"
            is-root
            @addDepts="addDepts"
            @updateDepts="updateDepts"
        ></TreeTools>
    </el-card>
    <!-- 主体 -->
    <el-card v-loading="loading" class="tree-card-main">
        <!-- 理解为tree循环解构:data中的数据 -->
        <el-tree
            :data="departs"
            :props="defaultProps"
            node-key="id"
        >
            <!-- tree标签内包裹的数据使用slot-scope接收每一次循环的data数据和node节点，后再通过tree-node向组件内部传入data-->
            <TreeTools
                slot-scope="{ node, data }"
                :tree-data="data"
                :tree-node="node"
                @addDepts="addDepts"
                @updateDepts="updateDepts"
            >
            </TreeTools>
        </el-tree>
        <addDept
            ref="addDept"
            :node-data="NodeData"
            :show-dialog.sync="isShowDialog"
            :title="title"
            @refresh="getDepartmentsList"
        ></addDept>
    </el-card>
</div>
</template>

<script>
import TreeTools from './components/tree.vue'
import addDept from './components/addDept.vue'
import { getDepartments } from '@/api/departments.js'
import tranListToTreeData from '@/utils/ListToTree.js'
export default {
	components: {
		TreeTools,
		addDept
	},
	data() {
		return {
			/* 公司tree */
			company: {
				name: '江苏传智播客教育科技股份有限公司',
				manager: '负责人'
			},
			departs: [],
			/* 树形数据默认配置 */
			defaultProps: {
				label: 'name'
			},
			/* dialog弹窗层 */
			isShowDialog: false,
			NodeData: {},
			/* 加载遮罩 */
			loading: true,
			/* 新建/编辑标题 */
			title: ''
		}
	},
	created() {
		this.getDepartmentsList()
	},
	methods: {
		async getDepartmentsList() {
			this.loading = true
			const res = await getDepartments()
			console.log(res)
			this.departs = tranListToTreeData(res.depts, '')
			this.company.name = res.companyName
			this.loading = false
		},
		/* 新增部门 */
		addDepts(Node) {
			this.title = '新增部门'
			this.isShowDialog = true
			Node ? this.NodeData = Node : this.NodeData = null
		},
		/* 编辑部门 */
		updateDepts(Node) {
			this.title = '编辑部门'
			this.isShowDialog = true
			Node ? this.NodeData = Node : this.NodeData = null
			this.$refs.addDept.getDepartDetail(Node.data.id)
		}
	}
}
</script>

<style lang="scss">
	.tree-card {
		font-weight: bold;
		font-size: 16px;
		color: #000;

		.el-dropdown-link {
			font-weight: bold;
			font-size: 16px;
			color: #000;
			cursor: pointer;
		}
	}
</style>

<style lang="scss" scoped>
	.dashboard-container {
		padding: 20px;




		.tree-card-main {
			margin-top: 20px;
		}
	}
</style>
